Flux Redux 参考资料

1 Flux

1.1 组织结构

• constant
  需要在各个模块中都使用的静态条目，比如操作的名称，状态的名称等
• Component
  各种拿数据进行渲染的视图函数，最普通的ReactClass，相关DOM的清理
• Action
  定义操作函数，引入并调用Dispatcher的方法触发操作任务
• Dispatcher
  操作分发功能的定义模块，接收操作执行回调
• Store
  数据的操作中心，使用Dispatcher监听并处理数据和状态的变更，
• App
  渲染主应用，初始应用信息
• Api
  各种获取和发送数据的操作，不多可以直接放Store

1.2 基本流程

• 用户访问界面（View）
• 用户操作View发出Action
• Dispacher收到Action，调用Store回调进行相应的数据更新
• Store更新数据后，触发View的change事件
• View执行change操作，更新用户界面
• 整体是View调用Action，Action调用Dispacher，Dispacher调用Store，Store更新View状态，View重新渲染

1.3 实现方式

• View
  • 绑定操作，在操作中执行对应的Action
  • 注册事件，在Store触发改变的时候更新状态
• Action
  • 调用Dispacher，执行对应的操作分发
• Dispacher
  • 注册相应的操作分发操作
  • 调用Store的数据处理，并触发Store的更新行为
• Store
  • 实现Event Emitter
  • 进行数据更新
  • 触发View的更新行为

2 Redux

2.1 实现方式

• Action
  • 对应一个个的用户操作，及操作相关的数据
• Store
  • 使用Reducer来处理各部分状态的变更，状态的变更只能在这里处理
  • 使用middleware来处理公共的操作，比如日志、统计等
  • 所有共享的数据都由state来传递
• View
  • 根据状态变更

3 Redux 与 Flux的区别

• Redux干掉了 Flux 中的Dispacher，功能揉到了Store里
• Redux 单一的Store，Flux 多个Store
• Redux 内层组件全部用props，state有最外层组件统一管理
• Store包含所有state的管理，每一部分state由一个reducer来处理
• 有一个根reducer来包装所有的细分reducer
• Redux 简化了Flux

4 参考资料

4.1 入门理解

1. 怎样理顺react，flux，redux这些概念的关系，开发中有必要使用它们吗?
2. 怎样理顺react，flux，redux这些概念的关系，开发中有必要使用它们吗?
3. 浅谈 React、Flux 与 Redux
4. 浅谈 React、Flux 与 Redux
5. 还在纠结 Flux 或 Relay，或许 Redux 更适合你
6. 还在纠结 Flux 或 Relay，或许 Redux 更适合你
7. 如何理解 Facebook 的 flux 应用架构？
8. Flux用过了，Redux也用过了，还是觉得不顺手？要不要自己造一个？
9. react 有哪些最佳实践?
10. React中文
11. React中文版
12. React 官网
13. Flux应用架构
14. Flux架构入门
15. 如何理解 Facebook 的 flux 应用架构？
16. flux github
17. Redux 介绍
18. 玩物圈前端技术栈总结（React+Redux）
19. redux官网
20. Redux核心概念
21. 深入浅出Redux
22. 使用Redux管理你的React应用
23. 谈一谈我对 React Flux 架构的理解
24. Redux中文文档
25. 深入理解React、Redux
26. Redux管理你的React应用
27. 解读Redux工作原理
28. redux github
29. react-redux github
30. NB的React
31. Redux从设计到源码

最后更新： 2022年03月02日 03:32

原始链接： http://rawbin-.github.io/framework/react/2016-04-05-flux-redux/

小淼焱

赏

× 赞赏这个人~